<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="../static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../static/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />

<link rel="stylesheet" type="text/css"
	href="../static/sweetalert/sweetalert.css" />
<style type="text/css">
	.aaa{
		margin: 20px 0px 10px 0px ;
	}
</style>
</head>

<body>
	<h3 style="margin-left: 20px;">
		当前用户账号为： <small><%=session.getAttribute("userTel")%></small>
	</h3>

	<form id="form1" class="form-horizontal" action="#" method="post">
		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-8">
				<table class="table table-hover">
				<button type="button" class="btn btn-default aaa" onclick="doAjaxQuery()">查询现有收获地址</button>
				<button type="button" class="btn btn-info aaa" onclick="doAddinfo()" style="float:right;">添加收货地址</button>
					<thead>
						<tr>
							<th>序号</th>
							<th style="display:none;">地址id</th>
							<th>收货人姓名</th>
							<th>收货人电话</th>
							<th>邮政编码</th>
							<th>收货地址</th>
							<th>详细地址</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>

		<!-- /example -->
	</form>

</body>
<script type="text/javascript"  src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript"  src="../static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" 	src="../static/sweetalert/sweetalert.min.js"></script>

<script type="text/javascript ">
		function doAddinfo() {
			var index=layer.open({
				type: 2,
				title: '新增收货地址',
				maxmin: true,
				area: ['800px', '400px'],
				content: 'addinfo.jsp'
			});
			layer.full(index);
		}

	// 使用jquery进行ajax请求处理
	function doAjaxQuery() {
		$.ajax({
			type : "POST", // 请求类型
			url : "../QueryRecAddressMessageAction", // 请求的url
			data : "usertel="+<%=session.getAttribute("userTel")%>, // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) {
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				 // 解析拼写的html内容
				 var strHtml = "";
				$.each(data, function(index,eachVal) {
					strHtml+="<tr>";

					strHtml += "<th scope='row'>";
					strHtml += (index + 1);
					strHtml += "</th>";
					
					strHtml+="<td style='display:none;'>";
					strHtml+=eachVal.addressid;
					strHtml+="</td>";
					strHtml+="<td>";
					strHtml+=eachVal.recname;
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+=eachVal.rectel;
					strHtml+="</td>";	
					
					strHtml+="<td>";
					strHtml+=eachVal.postcode;
					strHtml+="</td>";	

					strHtml+="<td>";
					strHtml+=eachVal.recaddress;
					strHtml+="</td>";	
					
					strHtml+="<td>";
					strHtml+=eachVal.addressdetail;
					strHtml+="</td>";
					
					strHtml += "<td>";
					strHtml += "<button id='button' onclick='delete_1(this)' class='button' type='button' style='margin-left:0px'>";

					strHtml += "删除";
					strHtml += "</button>";
					strHtml += "</td>";

					strHtml+="</tr>";
				});
				
				// 把解析的html内容，使用dom操作赋值到表格中
				$("#displaytbody").html(strHtml);
			},
			error : function(data) {
				alert("该用户没有收货地址，请添加收货地址后查询");
			}
		});
	}
	</script>
<script type="text/javascript">
	function delete_1(obj) {
		var $td = $(obj).parents('tr').children('td');
		addressid = $td.eq(0).text();
		console.info(addressid);
		swal({
			title : "确定要删除吗？",
			text : "删除后可就无法恢复了。",
			type : "warning",
			showCancelButton : true,
			closeOnConfirm : false,
			confirmButtonText : "是的，我要删除！",
			confirmButtonColor : "#ec6c62",
			cancelButtonText : "容我三思"
		}, function(isConfirm) {
			if (!isConfirm)
				return;
			$.ajax({
				type : "post",
				url : "../DelUserAddressinfo",
				data : {
					"addressid" : addressid
				},
				datatype:"text",
				success : function(data) {
					swal("删除成功", "success");
					$(obj).parent().parent().remove()//删除页面中那一行数据
				},
				error : function() { // ajax请求失败
					swal("啊哦。。。", "服务器走丢了。。。", "error");
				}
			})
		});
	}
</script>
</html>